<template>
  <el-dialog title="高级搜索" v-model="visible" width="600px">
    <el-form label-width="120px">
      <el-form-item 
        v-for="(item, index) in searchList" 
        :key="index"
        :label="item.name">
        <el-input 
          v-if="item.dictSearchColumnType == 1" 
          v-model="item.value" 
          :placeholder="'请输入' + item.name">
        </el-input>
        <el-date-picker
          v-else-if="item.dictSearchColumnType == 3"
          v-model="item.value"
          type="date"
          value-format="YYYY-MM-DD"
          :placeholder="'请选择' + item.name">
        </el-date-picker>
        <el-select
          v-else-if="item.dictSearchColumnType == 4"
          v-model="item.value"
          :placeholder="'请选择' + item.name">
          <el-option
            v-for="option in getDicOptions(item.dictCode)"
            :key="option.code"
            :label="option.name"
            :value="option.code">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 定义组件属性
const props = defineProps<{
  modelValue: boolean,
  searchList: any[]
}>()

// 定义触发事件
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void,
  (e: 'confirm', conditions: any[]): void
}>()

// 定义内部响应式数据
const visible = ref(false)
const searchItems = ref<any[]>([])

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    // 深拷贝搜索列表以避免修改原始数据
    searchItems.value = JSON.parse(JSON.stringify(props.searchList))
  }
})

// 监听visible变化
watch(() => visible.value, (val) => {
  emit('update:modelValue', val)
})

const getDicOptions = (_dictCode: string): { code: string; name: string }[] => {
  return [
    { code: '001', name: '选项1' },
    { code: '002', name: '选项2' }
  ]
}
// 关闭对话框
const close = () => {
  visible.value = false
}

// 确认搜索条件
const confirm = () => {
  const conditions: any[] = []
  searchItems.value.forEach((item: any) => {
    if (item.value) {
      conditions.push({
        "id": item.id,
        "value": item.value,
        "value1": item.value1
      })
    }
  })
  emit('confirm', conditions)
  close()
}
</script>

<style scoped lang="scss">
</style>
